<template>
    <view class="page">
        <view class="yhzd">
            <view>{{name}}的订单</view>
        </view>

        <view class="list_box" v-for="(parentItem, parentIndex) in list_date" :key="parentIndex">
            <view class="list">
                <view class="list_name_box" @tap.stop.prevent="listTap" :data-parentindex="parentIndex">
                    <view>{{ parentItem.month }}</view>
                    <image src="/static/img/倒三角.png" :class="'icon_down ' + (parentIndex.show && 'icon_down_rotate')"></image>
                </view>

                <view class="list_item_box" v-if="parentItem.show">
                    <view>日期</view>
                    <view>订单号</view>
                    <view>订单金额</view>
                </view>

                <view class="list_item" v-if="parentItem.show">
                    <view
                        class="list_item_box2"
                        @tap.stop.prevent="listItemTap"
                        :data-index="index"
                        :data-parentindex="parentIndex"
                        v-for="(item, index) in parentItem.list"
                        :key="index"
                    >
                        <view>{{ item.create_time }}</view>

                        <view>{{ item.trand_no }}</view>

                        <view>{{ item.price }}</view>
                    </view>
                </view>
            </view>
        </view>

        <view></view>
    </view>
</template>

<script>
// pages/dome/dome.js
var app = getApp();
import {wodezhangdan} from "@/common/api";
export default {
    data() {
        return {
            list_date: [],
            parentIndex: 0,
			id: 0,
			name: '',
			page: 1,
			limit: 20,
			nextpageflag: true
        };
    },
    onLoad: function (options) {
		this.setData({
			id: options.id,
			name: options.name
		})
		this.zhangdanlist()
	},
    /*** 生命周期函数--监听页面初次渲染完成*/
    onReady: function () {
	},
    /*** 生命周期函数--监听页面显示*/
    onShow: function () {},
    /*** 生命周期函数--监听页面隐藏*/
    onHide: function () {},
    /*** 生命周期函数--监听页面卸载*/
    onUnload: function () {},
    /*** 页面相关事件处理函数--监听用户下拉动作*/
    onPullDownRefresh: function () {},
    /*** 页面上拉触底事件的处理函数*/
    onReachBottom: function () {
		if(this.nextpageflag){
			const page = this.page + 1
			this.setData({
				page: page
			})
			this.zhangdanlist()
		}
	},
    /*** 用户点击右上角分享*/
    onShareAppMessage: function () {},
    methods: {
        //点击最外层列表展开收起
        listTap(e) {
            console.log('触发了最外层');
            let Index = e.currentTarget.dataset.parentindex;
            let //获取点击的下标值
                list_date = this.list_date;
            list_date[Index].show = !list_date[Index].show || false; //变换其打开、关闭的状态
            if (list_date[Index].show) {
                //如果点击后是展开状态，则让其他已经展开的列表变为收起状态
                this.packUp(list_date, Index);
            }
            this.setData({
                list_date
            });
        },

        listItemTap(e) {
            let parentindex = e.currentTarget.dataset.parentindex;
            let //点击的内层所在的最外层列表下标
                Index = e.currentTarget.dataset.index;
            let //点击的内层下标
                list_date = this.list_date;
            console.log(list_date[parentindex].item, Index);
            list_date[parentindex].item[Index].show = !list_date[parentindex].item[Index].show || false; //变换其打开、关闭的状态
            if (list_date[parentindex].item[Index].show) {
                //如果是操作的打开状态，那么就让同级的其他列表变为关闭状态，保持始终只有一个打开
                for (let i = 0, len = list_date[parentindex].item.length; i < len; i++) {
                    if (i != Index) {
                        list_date[parentindex].item[i].show = false;
                    }
                }
            }
            this.setData({
                list_date
            });
        },

        //让所有的展开项，都变为收起
        packUp(data, index) {
            for (let i = 0, len = data.length; i < len; i++) {
                //其他最外层列表变为关闭状态
                if (index != i) {
                    data[i].show = false;
                    for (let j = 0; j < data[i].item.length; j++) {
                        //其他所有内层也为关闭状态
                        data[i].item[j].show = false;
                    }
                }
            }
        },
		
		zhangdanlist(){
			const param = {
				id: this.id,
				page: this.page,
				limit: this.limit
			}
			uni.showLoading({
			    title: '加载中...'
			});
			wodezhangdan(param, (res => {
				console.log(res)
				const list = res.data.data.month_list
				if(list.length < this.limit) {
					this.setData({
						nextpageflag: false
					})
				}
				const newlist = this.list_date.concat(list)
				this.setData({
					list_date: newlist
				})
				uni.hideLoading();
			}))
		}
    }
};
</script>
<style>
.page {
    height: 100vh;
    background-color: rgb(208, 210, 211);
    color: rgb(116, 115, 115);
}

.yhzd {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20rpx;
}

.list_box {
    margin: 20rpx 20rpx 80rpx 20rpx;
}
.list_name_box {
    display: flex;
}

.icon_down {
    width: 50rpx;
    height: 50rpx;
}

.list_item_box {
    display: flex;
    justify-content: space-around;
}

.list_item_box2 {
    display: flex;
    justify-content: space-around;
    margin: 10rpx 0 10rpx 0rpx;
}
</style>
